<template>
	<view class="uni_box home">
		<!-- <navbar title='课程中心' :yin="true">
		</navbar> -->
		<!-- <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" /> -->
		<view class="content">
			<Nheader @getmine="getmine"></Nheader>
			<view class="asset">
				<view class="Total-assets">
					<view class="zileft">
						<view class="zione">
							<text class="zname">总资产估值（USDT）</text>
							<image class="yan" src="/static/img/yan.png" v-if="!iseyes&&islogin" @click="geteyes()" />
							<image class="yan" src="/static/img/yans.png" v-if="iseyes&&islogin"  @click="geteyes()" />
						</view>
						<text class="zinum" v-if="islogin">{{iseyes?'****':info.data[0].money}}</text>
						<text class="zinum" v-if="!islogin">****</text>
					</view>
					<image class="tu" src="/static/img/tu.png" />
				</view>
				<view class="lian" v-if="islogin" @click="chainrecharge">链上充值</view>
				<view class="lian" v-if="!islogin" @click="getlogin">注册登录</view>

			</view>
			<view class="hthree">
				<view class="btview">
					<scroll-view scroll-x class="nbview">
						<u-skeleton :loading="loading" :animation="true" bgColor="#000" v-if="deal_list==''"></u-skeleton>
						<view class="nbitem" v-if="item.name!='USDT'" v-for="(item,index) in deal_list" :key="index" @click="navClick(item)">
							<view class="bone">
								<image class="bicon" :src="item.logo" />
								<text class="bname txt">{{item.name}}<text class="bt"></text></text>
								<text class="bnums" :class="item.isType=='+'?'zhang':'die'">{{item.change+'%' }}</text>
							</view>
							<text class="lnum">{{  formatNumbertwo(item.now_price) }}</text>
							<text class="lnumtwo" v-if="getjisuan(item.now_price)">≈{{ getjisuan(item.now_price)}}</text>
						</view>
						<!-- <view class="nbitem">
							<view class="bone">
								<image class="bicon" src="/static/img/bicon.png" />
								<text class="bname txt">BTC/<text class="bt">USDT</text></text>
								<text class="bnums">-0.5%</text>
							</view>
							<text class="lnum">51100.11</text>
							<text class="lnumtwo">≈51100.11</text>
						</view> -->
					</scroll-view>
				</view>
				<view class="notice" @click="getgong">
					<image class="gongicon" src="/static/img/gongicon.png" />
					<!-- <text class="notice-gname">平台公告平台公告</text> -->
					<view class="noview">
						<u-notice-bar mode="vertical" duration="3000" color="#000" font-size="32" bg-color="none" :volume-icon="false" :list="noticelistdata"></u-notice-bar>
					</view>
					
				</view>
			</view>
			<view class="line"></view>
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="InviteTags" @click="getinvite">
						<image class="yao" src="/static/img/yao.png" />
						<view class="gnav">
							<text class="guname">邀请好友</text>
							<text class="gumiao">邀请好友</text>
							<text class="gumiao">即可领取奖励!</text>
						</view>
						<view class="cha">查看详情</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="InviteTags">
						<image class="shou" src="/static/img/shou.png" />
						<view class="gnav">
							<text class="guname">关联交易</text>
							<text class="gumiao">灵活！快捷！</text>
							<text class="gumiao">一键托管账户，释放您的时间</text>
						</view>
						<view class="cha">查看详情</view>
					</view>
				</swiper-item>
			</swiper>
			
			
			<view class="line"></view>
			<view class="zhuview">
				<view class="zhuone">
					<image class="huo" src="/static/img/huo.png" />
					<text class="zhuname">主流币</text>
				</view>
				<view class="zhutwo">
					<view class="zhutview oneitem">
						<view class="hview one">
							名称
						</view>
						<view class="hview end two">
							最新价
						</view>
						<view class="hview end three">
							涨跌幅
						</view>
					</view>
					<!-- <view class="zhutview twoitem">
						<view class="hview one">
							<image class="bicon" src="/static/img/bicon.png" />
							<text class="hname txt">BTC<text class="usd">/USDT</text></text>
						</view>
						<view class="hview end two">
							<text class="jia">28,486.1</text>
						</view>
						<view class="hview end three">
							<view class="zitem zhang">+0.56%</view>
						</view>
					</view> -->
					<view class="zhutview twoitem" v-if="item.name!='USDT'" v-for="(item,index) in deal_list" :key="index" @click="botClick(item)">
						<view class="hview one">
							<image class="bicon" :src="item.logo" />
							<text class="hname txt">{{item.name}}<text class="usd"></text></text>
						</view>
						<view class="hview end two">
							<text class="jia">{{formatNumbertwo(item.now_price)}}</text>
						</view>
						<view class="hview end three">
							<view class="zitem " :class="item.isType=='+'?'zhang':'die'">{{ item.change+'%' }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 我的侧边栏 -->
			<Mine :mshow="mshow"  @close="mineclose"></Mine>
		</view>
	</view>
</template>

<script>
    import Mine from "@/components/Mine/Mine"; 
	export default {
		components:{
			Mine
		},
		data() {
			return {
				mshow:false,
				info:{
					total:0,
					data:[
						{money:0}
					]
				},
				iseyes:false,
				token:uni.getStorageSync('token'),
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,

				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				deal_list:[],
				islogin:false,
				loading: true, // 是否显示骨架屏组件
				noticelistdata:[
				
				]
			}
		},
		onLoad() {
			// this.$store.commit('initWebsocket');
			// console.log(this.$store.state.token)
		},
		onShow() {
			if(!this.info){
				this.getstatistic();//用户资产
				
			}
			if(uni.getStorageSync('token')){

				this.islogin = true
			}
			this.gethomedata()
			this.noticelist()
			uni.$on('daymarketAll', (data) => {
				// console.log(this.currency_data)
				let locale = uni.getStorageSync('locale')
				this.deal_list = this.currency_data.map(item => {
				if (item.id == data.currency_id) {
				// item['legal_name'] = data.currency_name;
				item['now_price'] = data.close;
				item['isType'] = data.isType;
				item['change'] = data.change;
				// item['Equivalent'] = Number(data.price)/Number(locale.rate);
				}
				// console.log(item)
				// console.log(this.deal_list)
				return item
				})
			});
		},
		onPullDownRefresh() {
			console.log("+++")
			// uni.stopPullDownRefresh();
			this.getstatistic();//用户资产
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		methods: {
			async noticelist(){
				let res = await this.$u.api.announcement({
				});
				console.log(res)
				let shu = res
				let shuzu = []
				for(let i in shu){
					shuzu.push(shu[i].title)
				}
				this.noticelistdata = shuzu
			},
			async gethomedata(){
				
				let res = await this.$u.api.currency({
				});
				this.currency_data = res
				// console.log(res)
				let resd = await this.$u.api.apiconfig({
				});
				if(!uni.getStorageSync('locale')){
					this.languagelist = resd.language
					let item = this.languagelist[0]
					this.$i18n.locale = item
					// console.log(this.$i18n.locale)
					uni.setStorageSync('locale',item)
				}
				
				
			},
			async getstatistic(){
				let res = await this.$u.api.assets_statistic({
					type:'day'
				});
				// console.log(res)
				this.info = res
			},
			getgong(){
				// if(!uni.getStorageSync('token')){
				// 	this.getlogin()
				// 	return false;
				// }
				this.navrouter("/pages/TPage/Gonglist");
			},
			getmine(){
				if(!uni.getStorageSync('token')){
					this.getlogin()
				}else{
					this.mshow = true
					uni.hideTabBar();
				}
				
			},
			mineclose(){
				this.mshow = false
				uni.showTabBar();
			},
			geteyes(){
				this.iseyes = !this.iseyes
			},
			chainrecharge(){
				this.navrouter("/pages/TPage/Rechargecoins");
			},
			getlogin(){
				this.navrouter('/pages/login/login')
			},
			getinvite(){
				if(!uni.getStorageSync('token')){
					this.getlogin()
					return false;
				}
				this.navrouter("/pages/TPage/invitePage?type=home");
			},
			getjisuan(price){
				let locale = uni.getStorageSync('locale')
				if(locale == '' || !locale){
					return ''
				}else{
					return  this.formatNumbertwo(Number(price)/Number(locale.rate))
				}
				
			},
			containsDecimal(str) {
				return /\d+\.\d+/.test(str);
			},
			formatNumber(num) {
				// console.log(typeof num)
				// 将数字转换为字符串
				
				var numStr = ''
				if(typeof num == 'number'){
					numStr = num.toString();
				}else{
					numStr = num;
				}
				if(!this.containsDecimal(numStr)){
					return Number(num)
				}
				
				// 使用正则表达式检查小数点后是否全为0
				const isDecimalAllZeros = /^\d+(\.\d{6})?0{1,}$/.test(numStr);
				// 根据条件格式化数字
				return isDecimalAllZeros ? Number(num).toFixed(2) : Number(num).toFixed(6);
			},
			formatNumbertwo(num){
				return this.toCompressedNumberString(Number(num).toFixed(6))
			},
			toCompressedNumberString(num, precision) {
				// 使用toFixed转换为有效的小数点后的位数，并处理特殊的Infinity和NaN值
				let str = Number.isFinite(num) ? num.toFixed(precision) : String(num);
				// 使用正则表达式移除尾部多余的零
				str = str.replace(/\.?0+$/, '');
				// 移除前导零，除非是整数
				str = str.replace(/^0+(?!\.|$)/, '');
				return this.padDecimal(str);
			},
			padDecimal(num) {
				// 将数字转换为字符串
				const numStr = num.toString();
				// 使用正则表达式检查是否有小数点和两位小数
				if (numStr.match(/^\d+(\.\d{1,2})?$/)) {
					// 如果小数点后只有一位数字，则补0
					return numStr.replace(/\.\d$/, '.00').padEnd(4, '0');
				}
				// 如果不是小数或小数点后已经有两位数字，则直接返回原数字
				return num;
			},
			navClick(item){
				if(!uni.getStorageSync('token')){
					this.getlogin()
					return false;
				}
			},
			botClick(item){
				if(!uni.getStorageSync('token')){
					this.getlogin()
					return false;
				}
			}


		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding-bottom: 130rpx;
		.asset{
			margin: 50rpx 45rpx;
			.Total-assets{
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 16rpx;
				.zileft{
					display: flex;
					flex-direction: column;
					.zione{
						display: flex;
						flex-direction: row;
						align-items: center;
						.zname{
							font-family: Source Han Sans CN;
							font-weight: bold;
							font-size: 30rpx;
							color: #111111;
							display: inline-block;
							margin-right: 15rpx;
						}
						.yan{
							width: 44rpx;
							height: 30rpx;
						}
					}
					.zinum{
						margin-top: 43rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						font-size: 50rpx;
						color: #111111;
					}
				}
				.tu{
					margin-left: auto;
					width: 173rpx;
					height: 149rpx;
				}
			}
			.lian{
				height: 80rpx;
				background: #030000;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				margin: 60rpx 0 53rpx;
			}
		}
		.hthree{
			padding: 0 30rpx;
			.btview{
				.nbview{
					white-space: nowrap;
					// justify-content: space-between;
					// display: flex;
					// flex-direction: row;
					.nbitem{
						width: 44%;
						margin-right: 2%;
						min-height: 176rpx;
						padding: 20rpx 20rpx;
						background: #F7F7F7;
						border-radius: 20rpx;
						display: inline-block;
						.bone{
							display: flex;
							flex-direction: row;
							align-items: center;
							.bname{
								margin-left: 10rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								font-size: 28rpx;
								color: #111111;
								display: inline-block;
								max-width: 76%;
							}
							.bt{
								font-size: 24rpx;
							}
							.bicon{
								width: 30rpx;
								height: 30rpx;
							}
							.bnums{
								margin-left: auto;
								padding: 5rpx 14rpx;
								background: #F94F4F;
								border-radius: 25rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								font-size: 24rpx;
								color: #FFFFFF;
							}
							.zhang{
								background: rgba(50,190,103,0.15);
								color: #32BE67;
								border: 1px solid #32BE67;
							}

						}
						.lnum{
							display: block;
							margin: 15rpx 0 2rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							font-size: 36rpx;
							color: #111111;
						}
						.lnumtwo{
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 24rpx;
							color: #999999;
						}
					}
					.nbitem:last-child{
						margin-right: 0;
					}
				}
			}
			.notice{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 100rpx 0 34rpx;
				.gongicon{
					margin-right: 20rpx;
					width: 28rpx;
					height: 30rpx;
				}
				.noview{
					flex: 1;
					width: 90%;
				}
				.notice-gname{
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
				}
			}
			
		}
		.line{
			height: 10rpx;
			background: #F7F7F7;

		}
		.InviteTags{
			margin: 55rpx 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.shou{
				width: 129rpx;
				height: 112rpx;
				margin-right: 45rpx;
			}
			.yao{
				width: 94rpx;
				height: 94rpx;
				margin-right: 45rpx;
			}
			.gnav{
				width: 54%;
				display: flex;
				flex-direction: column;
				.guname{
					font-family: Source Han Sans CN;
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					display: block;
					margin-bottom: 10rpx;
				}
				.gumiao{
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					display: block;
					margin-top: 5rpx;
				}
			}
			.cha{
				margin-left: auto;
				width: 140rpx;
				height: 48rpx;
				border-radius: 24rpx;
				border: 1rpx solid #000000;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
		}
		.zhuview{
			padding: 30rpx;
			.zhuone{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 40rpx;
				.huo{
					width: 32rpx;
					height: 40rpx;
					margin-right: 15rpx;
				}
				.zhuname{
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
				}
			}
			.zhutwo{
				.zhutview{
					display: flex;
					flex-direction: row;
					.hview{
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #8B8B8B;
						display: flex;
						align-items: center;
						justify-content: flex-start;
					}
					.end{
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
				}
				.oneitem{
					margin-bottom: 30rpx;
				}
				.twoitem{
					padding: 30rpx 0;
					.bicon{
						width: 44rpx;
						height: 44rpx;
						margin-right: 10rpx;
					}
					.hname{
						max-width: 65%;
						display: inline-block;
						font-family: Source Han Sans CN;
						font-weight: bold;
						font-size: 30rpx;
						color: #000000;
						.usd{
							font-size: 24rpx;
							font-weight: 400;
						}
					}
				}
				.jia{
					font-family: Source Han Sans CN;
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
				}
				.zitem{
					padding: 8rpx 20rpx;
					border-radius: 10rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 24rpx;
					color: #32BE67;
				}
				.zhang{
					background: rgba(50,190,103,0.15);
					color: #32BE67;
					border: 1px solid #32BE67;
				}
				.die{
					background: rgba(233,81,81,0.15);
					border: 1px solid #E95151;
					color: #E85151;
				}
				.one{
					width: 35%;
				}
				.two{
					width: 35%;
				}
				.three{
					width: 30%;
				}
			}
		}
	}
</style>
